<template>
  <div v-loading="pageLoading" class="publicize-setting">
    <div class="header">
      <div class="setting-title">宣讲设置</div>
      <span>
        开启订单推送<el-switch v-model="model.isAcceptPush" size="large" style="margin-left: 16px;" />
        <span style="margin-left: 22px;">可预约状态</span><el-switch v-model="model.isAcceptAppointment" size="large"
          style="margin-left: 16px;" />
      </span>
    </div>
    <div class="setting-main">
      <div class="setting-title" style="margin-bottom: 22px;">可预约星期</div>
      <div class="week-list">
        <div v-for="(weekItem, weekIndex) in weekList" :key="weekIndex" @click="weekChange(weekItem)"
          :class="['week-item', weekCheck == weekItem.value ? 'week-check' : '', setCheckStatus(weekItem)]">
          {{ weekItem.text }}
        </div>
      </div>
      <div class="setting-title" style="margin-bottom: 22px;">可预约时间段</div>
      <el-checkbox-group :disabled="!weekCheck" @change="timeChange" v-model="timeCheckList">
        <el-checkbox :label="1">上午场</el-checkbox>
        <el-checkbox :label="2">下午场</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="button">
      <el-button type="primary" @click="reset" style="color: #8B8B8B;" text bg>重 置</el-button>
      <el-button type="primary" round @click="confirm">确 认</el-button>
    </div>
  </div>
</template>
<script>
export default { name: 'PublicizeSetting' }
</script>
<script setup>
import { ref } from 'vue';
import { http } from '@/utils/http/index.js'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/modules/auth';
const authStore = useAuthStore()

/**预约星期 */
const weekCheck = ref('')
/**预约时间段 */
const timeCheckList = ref([])

const weekList = ref([
  { value: 'monday', text: '周一' },
  { value: 'tuesday', text: '周二' },
  { value: 'wednesday', text: '周三' },
  { value: 'thursday', text: '周四' },
  { value: 'friday', text: '周五' }
])

const model = ref({
  mondayMorningStatus: false,
  mondayAfternoonStatus: false,
  tuesdayMorningStatus: false,
  tuesdayAfternoonStatus: false,
  wednesdayMorningStatus: false,
  wednesdayAfternoonStatus: false,
  thursdayMorningStatus: false,
  thursdayAfternoonStatus: false,
  fridayMorningStatus: false,
  fridayAfternoonStatus: false,
  isAcceptPush: false,
  isAcceptAppointment: false
})

const pageLoading = ref(false)
// 获取专家配置信息
const getExpertSetting = () => {
  pageLoading.value = true
  http.$GET('/Preach/GetPreachExpertCourseSetting', { ExpertId: authStore.userInfo.expertId }).then(res => {
    if (res.isError) return
    if (!res.result) return
    model.value = res.result;
    /**刷新时有选中的话 */
    if (weekCheck.value) {
      const morning = model.value[`${weekCheck.value}MorningStatus`]
      const afternoon = model.value[`${weekCheck.value}AfternoonStatus`]
      if (morning) timeCheckList.value.push(1)
      if (afternoon) timeCheckList.value.push(2)
      return
    }
    const weeks = weekList.value.map(item => item.value)
    for (let index = 0; index < weeks.length; index++) {
      const week = weeks[index];
      const morning = model.value[`${week}MorningStatus`]
      const afternoon = model.value[`${week}AfternoonStatus`]
      if (morning) {
        weekCheck.value = week
        timeCheckList.value.push(1)
      }
      if (afternoon) {
        weekCheck.value = week
        timeCheckList.value.push(2)
      }
      if (morning || afternoon) break
    }
  }).finally(() => pageLoading.value = false)
}
getExpertSetting()

/**判断某天下面是否有课 */
const setCheckStatus = (weekItem) => {
  return (model.value[`${weekItem.value}MorningStatus`] || model.value[`${weekItem.value}AfternoonStatus`]) ? 'active' : ''
}

const weekChange = (weekItem) => {
  /**设置上下午选中状态 */
  timeCheckList.value.length = 0
  weekCheck.value = weekItem.value
  model.value[`${weekItem.value}MorningStatus`] && timeCheckList.value.push(1)
  model.value[`${weekItem.value}AfternoonStatus`] && timeCheckList.value.push(2)
}

const timeChange = () => {
  /**存入数据 */
  model.value[`${weekCheck.value}MorningStatus`] = timeCheckList.value.includes(1)
  model.value[`${weekCheck.value}AfternoonStatus`] = timeCheckList.value.includes(2)
}

const confirm = () => {
  pageLoading.value = true
  http.$POST('/Preach/AddOrUpdatePreachExpertCourseSetting', { ...model.value, uid: authStore.userInfo.expertId }).then(res => {
    if (res.isError) return ElMessage.warning('操作失败')
    ElMessage.success(res.message)
    getExpertSetting()
  }).finally(() => pageLoading.value = false)
}

const reset = () => {
  weekCheck.value = ''
  timeCheckList.value.length = 0
  Object.keys(model.value)
    .forEach(key => model.value[key] = false)
}

</script>
<style lang='scss' scoped>
.publicize-setting {
  width: 100%;
  height: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .setting-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }

  .header {
    height: 64px;
    border-bottom: 1px solid #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    font-size: 16px;
    font-weight: normal;
    color: #666666;

    .el-switch {
      --el-switch-on-color: #64BE59;
    }
  }

  .setting-main {
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 34px 28px;

    .week-list {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-bottom: 56px;
      user-select: none;

      .week-item {
        font-size: 14px;
        cursor: pointer;
        position: relative;
        color: #606266;
        border-radius: 4px;
        border: 1px solid transparent;
        padding: 4px 6px 4px 30px;
        transition: all .3s;

        &.week-check {
          border-color: var(--theme-color);
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 6px;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          border: 1px solid #dcdfe6;
          transition: border-color .3s;
        }

        &.active {
          color: var(--theme-color);

          &::before {
            border: 5px solid var(--theme-color);
          }
        }
      }
    }

  }

  .button {
    text-align: center;
    margin-bottom: 62px;

    :deep(.el-button) {
      border-radius: 26px;
      width: 129px;
      height: 39px;
    }
  }
}
</style>